<template>
    <div class="rigth-box" style="padding: 10px 20px 14px;">
        <div style="margin-bottom: 20px;text-align: right;">
            <el-button type="info" size="mini" icon="el-icon-edit" @click="isHandleEdit" v-if="!isShowEdit"> 编辑 / 删除 </el-button>
            <span class="mr20 cursor_pointer font_black7 font_size14" v-if="isShowEdit" @click="isHandleEdit"> 取消操作 </span>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddEdit({})"> 新增职位 </el-button>
        </div>
        <div class="rigth-box-content" style="padding-right: 0px;">
            <div class="box-card-container">
                <div v-for="(item, index) in list" :key="index" class="box-card-item">
                    <div class="box-card" :class="{ 'box-card-checked': isChecked(item.id) }" @click="selectItem(item)">
                        <div class="custom-radio" :class="{ 'checked': isChecked(item.id) }">
                            <div class="radio-inner"></div>
                        </div>
                        <span class="font_size16">{{ item.title }}</span>
                    </div>
                    <div class="opran-buttons ml10 mr10 cursor_pointer">
                        <template v-if="isShowEdit">
                            <span class="font_bule font_size14" @click.stop="handleAddEdit(item)">编辑</span>
                            <span class="ml10 font_red font_size14" @click.stop="handleDelete(item)">删除</span>    
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="rigth-box-footer flex_between">
            <div class="summary-info"></div>
            <div class="action-buttons">
                <el-button type="primary" @click="sbumitHandle" size="large" class="btn-confirm"> 确 定
                </el-button>
            </div>
        </div>
        <positionAddEditDialog ref="positionAddEditDialogRef" @addBack="addBack"></positionAddEditDialog>
    </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch, onMounted, getCurrentInstance, nextTick } from '@vue/composition-api'
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
const { stateHooks } = useCommonHooks()
import positionAddEditDialog from "@/pages/setting/components/positionAddEditDialog.vue"
import config from "@/js/conf/Config.js"
const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:rights', 'close'])
const props = defineProps({
    position_rel: {
        type: [String, Number],
        default: '',
    },
})
const isShowEdit = ref(false)
// 新增职位
const handleAddEdit = (item) => {
    proxy.$refs.positionAddEditDialogRef.open(item)
}

// 编辑/删除职位
const isHandleEdit = () => {
    isShowEdit.value = !isShowEdit.value
}

// 新增/编辑职位成功后刷新列表
const addBack = (flag) => {
    if (flag) {
        getLs()
        isShowEdit.value = false
    }
}

// 成员信息
const list = ref([])
const getLs = async () => {
    try {
        let res = await proxy.$api({
            url: config.company_position_ls, data: {}
        })
        let result = res.data || []
        if (res.status == 1) {
            list.value = result
            // 数据加载完成后再设置当前选中项，确保有匹配的数据
            current_position_rel.value = props.position_rel
        }
    } catch (error) {
        console.error('获取职位列表失败:', error)
        proxy.$message.error('获取职位列表失败')
    }
}

const current_position_rel = ref('')
const open = () => {
    nextTick(() => {
        setTimeout(() => {
            getLs() // 先获取数据
        }, 100)
    })
}

// 安全比较函数，避免类型不匹配问题
const isChecked = (itemId) => {
    // 转换为字符串进行比较，避免类型不匹配
    return String(current_position_rel.value) === String(itemId)
}

const selectItem = (item) => {
    console.log('选中项:', item)
    current_position_rel.value = item.id
}

// 删除职位
const handleDelete = (item) => {
    proxy.$confirm(`确定要删除职位 "${item.title}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            let res = await proxy.$api({
                url: config.company_position_del, data: {
                    id: item.id
                }
            })
            if (res.status == 1) {
                proxy.$message.success('删除成功')
                await getLs()
            }
        } catch (error) {
            proxy.$message.error('删除失败')
        }
    }).catch(() => {
        // 用户取消删除
    })
}

const sbumitHandle = () => {
    emit('update:position', current_position_rel.value)
    emit('close')
}

// 监听props变化，实时更新选中状态
watch(() => props.position_rel, (newVal) => {
    if (newVal !== undefined) {
        current_position_rel.value = newVal
    }
})

onMounted(() => { })

defineExpose({
    open,
})
</script>

<style lang="scss" scoped>
.rigth-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .rigth-box-content {
        box-sizing: border-box;
        flex: 1;
        height: 0;
        min-height: 0;
        padding-right: 100px;
        overflow-y: auto;
    }

    .rigth-box-footer {
        flex-shrink: 0;
        border-top: 1px solid #f1f1f1;
        margin-top: 10px;
        padding: 14px 10px 4px;

        .summary-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .action-buttons {
            display: flex;
            gap: 12px;

            .btn-cancel {
                border-color: #cbd5e1;
                color: #64748b;
            }

            .btn-confirm {
                background-color: #3b82f6;
                border-color: #3b82f6;
            }
        }
    }
}

.box-card-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;

    .box-card-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .box-card {
        flex: 1;
        padding: 14px;
        border: 1px solid #d9dee6; // 恢复默认灰色边框
        border-radius: 4px;
        margin-bottom: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: all 0.2s ease;

        &:hover {
            border-color: #3b82f6;
            background-color: #f0f9ff;
        }
    }

    /* 新增选中状态的样式 */
    .box-card-checked {
        border: 1px solid #3b82f6; // 选中时边框变为蓝色
        color: #3b82f6; // 选中时字体变为蓝色
    }

    /* 自定义单选框样式保持不变 */
    .custom-radio {
        width: 16px;
        height: 16px;
        border: 1px solid #d9dee6; // 恢复默认灰色边框
        border-radius: 50%;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s ease;

        &.checked {
            border-color: #3b82f6;
            background-color: #e0f2fe;

            .radio-inner {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #3b82f6;
            }
        }

        .radio-inner {
            width: 0;
            height: 0;
            border-radius: 50%;
            background-color: transparent;
            transition: all 0.2s ease;
        }
    }
}

.opran-buttons{
    width: 90px;
}

.el-drawer__header {
    margin-bottom: 0 !important;
}
</style>
